<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bert-TextCNN中文歌词情感分类</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #chat-form {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 600px;
            margin-top: 50px;
        }
        #input-text {
            padding: 10px;
            font-size: 18px;
            margin-bottom: 20px;
        }
        #submit-button {
            padding: 10px;
            font-size: 18px;
            cursor: pointer;
        }
        #clear-button {
            padding: 10px;
            font-size: 18px;
            cursor: pointer;
        }
        #response {
            margin-top: 30px;
            font-size: 18px;
            font-weight: bold;
        }
        .question {
            cursor: pointer;
            text-decoration: underline;
            color: blue;
        }
    </style>
</head>
<body>
    <h1>中文歌词情感分类识别</h1>
    <form id="chat-form">
        <textarea id="input-text" placeholder="歌词输入（限词512）"></textarea>
        <button id="submit-button" type="submit">发送</button>
        <button id="clear-button" type="reset">清空</button>
    </form>
    <div id="response" title="歌词情感分类结果">

    </div>
    <h4>歌词举例:</h4>
    <p>提示：模型训练效果较差，纯娱乐...</p>
    <p class="question">
        紫荆花飘扬，飞向避风的海港。摇曳一湾水温柔，全是最爱坚守。纯真是你的微笑，一眼到永远的抱抱。爱像亲恩般深长，时时为我鼓掌，爱和唱。<br>
        永远的紫荆花，在爱之下茁壮发芽。阳光中笑开花，是暖暖的翩翩启航。同屋檐之下像一幅画，日夜相守相望。闪闪星光，照亮你的脸庞。<br>
        心中的紫荆花，凭爱开花同处一家。多清澈这天空，晴雨相拥同心逐梦。坚守我信心一路出众，无惧罡风。感恩你热暖送，花开于爱之中。<br>
        永远的紫荆花，在爱之下茁壮发芽。阳光中笑开花，是暖暖的翩翩启航。同屋檐之下像一幅画，日夜相守相望。闪闪星光，照亮你的脸庞。<br>
        永远的紫荆花，要飞翔啊。纵有浪花，说不尽的牵挂。有我在啊，温暖的家。爱流淌拥抱彼此心岸，不负时光。多骄傲的枝芽，春暖后又开花。<br>
    </p>

    <script>
        const chatForm = document.getElementById("chat-form");
        const inputText = document.getElementById("input-text");
        const responseDiv = document.getElementById("response");
        const questions = document.getElementsByClassName("question");

        chatForm.addEventListener("submit", async (event) => {
            event.preventDefault();
            const input = inputText.value.trim();
            if (!input) return;

            responseDiv.textContent = "生成响应中...";
            const response = await fetch("https://lyricsapp.cpolar.top/chat", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ input_text: input }),
            });

            if (response.ok) {
                const data = await response.json();
                responseDiv.textContent = data.response;
            } else {
                responseDiv.textContent = "无法生成响应，请稍后重试。";
            }
        });

        chatForm.addEventListener("clear", async () => {
        });

        for (let i = 0; i < questions.length; i++) {
            questions[i].addEventListener("click", () => {
                inputText.value = questions[i].textContent;
            });
        }
    </script>
</body>
</html>
